<template>
  <div>
    <el-dialog
      v-model="createVisible"
      :title="operation == 'create' ? '添加标签组' : '编辑标签组'"
      @before-ok="createOk"
      @close="close(createRef)"
      width="500px"
    >
      <div style="width: 400px">
        <el-form
          class="mt10 form-border"
          :model="createForm"
          ref="createRef"
          :rules="createRules"
          label-width="140px"
          size="large"
        >
          <el-form-item label="标签组名称：" prop="group_name">
            <el-input
              v-model="createForm.group_name"
              placeholder="请输入标签组名称"
            ></el-input>
          </el-form-item>
          <el-form-item label="备注：">
            <el-input
              v-model="createForm.desc"
              placeholder="请输入备注"
            ></el-input>
          </el-form-item>
        </el-form>
      </div>
      <template #footer>
        <span class="flex center">
          <el-button @click="createVisible = false">取消</el-button>
          <el-button type="primary" @click="createOk(createRef)"
            >确定</el-button
          >
        </span>
      </template>
    </el-dialog>
  </div>
</template>
<script lang="ts">
export default {
  name: "createGoodsLabelGroup",
};
</script>

 <script lang="ts" setup>
import { ref, reactive, getCurrentInstance, nextTick } from "vue";
import type { FormInstance } from "element-plus";
import { Result, ResultError } from "@/types";
import {
  createGoodsLabelGroup,
  updateGoodsLabelGroup,
} from "@/api/store/goods_label";

const {
  proxy: { $utils },
} = getCurrentInstance() as any;

const emit = defineEmits(["success"]);

const createVisible = ref<boolean>(false);

const createRef = ref<HTMLElement>();

const operation = ref<string>("create");

const operationId = ref<number | string>(0);

const createForm = ref({
  group_name: "",
  desc:''
});
const createRules: any = reactive({
  group_name: [{ required: true, message: "标签组名称不能为空！" }],
});

const createOk = async (formEl: typeof FormInstance | undefined) => {
  if (!formEl) return;
  await formEl.validate((valid: any) => {
    if (valid) {
      let operationApi = null;
      if (operation.value == "create") {
        operationApi = createGoodsLabelGroup(createForm.value);
      } else {
        operationApi = updateGoodsLabelGroup({
          id: operationId.value,
          group_name: createForm.value.group_name,
          desc: createForm.value.desc,
        });
      }
      operationApi
        .then((res: Result) => {
          close(formEl);
          emit("success");
          $utils.successMsg(res);
        })
        .catch((err: ResultError) => {
          $utils.errorMsg(err);
        });
    }
  });
};
const open = (id: number = 0, name: string = "", desc: string = "") => {
  if (id != 0) {
    operation.value = "update";
    operationId.value = id;
    createForm.value.group_name = name;
    createForm.value.desc = desc;
  } else {
    operation.value = "create";
  }
  createVisible.value = true;
};

const close = async (formEl: typeof FormInstance | undefined) => {
  if (formEl) {
    formEl.resetFields();
  }
  operationId.value = 0;
  createVisible.value = false;
};
defineExpose({ open });
</script>